<template>
  <div>
    <swiper class="swiper" :indicator-dots="images.length>1?true:false" autoplay="true" interval="5000" duration="1000" v-if="images">
      <swiper-item v-for="(item, index) in images" :key="index">
          <a v-if="item.jump_url != null && item.jump_url != ''" class="slide-image" :href="item.jump_url" :style="'background-image:url('+item.litpic+')'"></a>
          <div v-else class="slide-image" :style="'background-image:url('+item.litpic+')'"></div>
      </swiper-item>
    </swiper>
    <!-- <a class="topNotic" href="/pages/announced/main?id=19">
      <van-notice-bar
        scrollable="false"
        :text="title"
      />
    </a>
    <div class="p-1">
      <div>报名表模板范文</div>
      <div class="table-content mt-1 text-gray">
        <div class="tr">
            <div class="td">您的姓名：</div>
            <div class="td">张三</div>
        </div>
        <div class="tr">
            <div class="td">联系电话：</div>
            <div class="td">15811327683</div>
        </div>
        <div class="tr">
            <div class="td">聚会类型：</div>
            <div class="td">同学聚会</div>
        </div>
        <div class="tr">
            <div class="td">聚会人数：</div>
            <div class="td">100</div>
        </div>
        <div class="tr">
            <div class="td">购买产品：</div>
            <div class="td">32</div>
        </div>
      </div>
    </div> -->
    <div class="p-1">
      <van-col span="24">
        <div class="title">报名表</div>
        <van-cell-group class="inputClass">
          <van-field
            label="您的姓名"
            left-icon="contact"
            clearable="true"
            placeholder="请输入您的姓名！"
            required="true"
            border="true"
            size="large"
            label-class='inputClass'
            title-class='inputClass'
            @input="ckName"
            :value="names"
          />
          <van-field
            label="联系电话"
            type="number"
            left-icon="phone-o"
            clearable="true"
            placeholder="请输入您的电话！"
            required="true"
            border="true"
            @input="ckphone"
            :value="phone"
          />
          <van-field
            label="聚会类型"
            left-icon="friends-o"
            clearable="true"
            placeholder="请选择聚会类型"
            border="true"
            @click="openPop"
            :value="juInput"
            disabled
          />
          <van-popup
            title="聚会类型"
            :show="showPop" 
            position="bottom" 
            overlay="true"
            show-toolbar="true"
          >
            <van-picker
              show-toolbar
              title="聚会类型"
              :columns="columns"
              @cancel="onClose"
              @confirm="onConfirm"
            />
          </van-popup>
          <van-field
            label="聚会人数"
            left-icon="points"
            clearable="true"
            placeholder="请选择聚会人数"
            required="true"
            border="true"
            @click="openPoprs"
            :value="rsInput"
            disabled
          />
          <van-popup
            title="聚会人数"
            :show="showPoprs" 
            position="bottom" 
            overlay="true"
            show-toolbar="true"
          >
            <van-picker
              show-toolbar
              title="聚会人数"
              :columns="people"
              @cancel="onClosers"
              @confirm="onConfirmrs"
            />
          </van-popup>
          <van-field
            label="购买产品"
            left-icon="point-gift-o"
            required="true"
            border="true"
            disabled
            use-button-slot
          >
            <van-stepper
              class="lft classBorder"
              :value="boxNumber"
              integer="true"
              min="10"
              step="1"
              slot="button"
              disable-input="true"
              @overlimit="overlimit"
              @plus="plus"
              @minus="minus"
            />
          </van-field>
        </van-cell-group>
        <van-cell-group class="btnBOM">
          <van-button size="normal" type="primary" block="true" class="btnTy" @click="submitFrom"> 提交 </van-button>
        </van-cell-group>
      </van-col>
      <van-popup class="hdoperateBomb" :overlay="true" @close="operateShow = false" :show="operateShow" >
        <div class="operate-txt hdbgImg">
          <van-icon class="text-gray ml-1 ft-20 hdclosed" name="cross" @click="operateShow = false" />
          <img src="../../../static/images/hy.png" class="hy" @click="thankYou">
          <img src="../../../static/images/hd.png" class="dialog" width="100%">
        </div>
      </van-popup>
      <van-dialog id="van-dialog" />
      <van-toast id="van-toast" />
    </div>
  </div>
</template>
<script>
import Dialog from '../../../static/vant/dialog/dialog'
import Toast from '../../../static/vant/toast/toast'
import {integral, views, validatePhone} from '../../utils/utils.js'
export default {
  onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 增加积分
      this.sharpePage(this.$root.$mp.query.id, 3)
    } else {
      this.sharpePage(this.$root.$mp.query.id, 4)
    }
    return {
      title: '活动报名',
      imageUrl: this.images[0],
      path: '/pages/sign_up/main'
    }
  },
  data () {
    return {
      showPop: false,
      showPoprs: false,
      operateShow: false,
      names: '',
      phone: '',
      juInput: '',
      rsInput: '',
      boxNumber: 10,
      columns: ['同学会', '老乡会', '同事聚', '家人聚', '朋友聚'],
      people: ['10-15', '15-25', '25-50', '50以上'],
      images: [],
      title: '---------------中奖信息标题显示--------------------'
    }
  },
  components: {},
  mounted () {
    let _this = this
    wx.request({
      url: this.apiUrl + 'api/getbanner?type=apply',
      success (res) {
        let data = res.data
        if (data.code === 200) {
          _this.images = Object.assign({}, data.data)
        }
      }
    })
  },
  methods: {
    onClose () {
      this.showPop = false
    },
    onClosers () {
      this.showPoprs = false
    },
    openPoprs (event) {
      this.showPoprs = true
    },
    ckName (event) {
      this.names = event.mp.detail
    },
    ckphone (event) {
      this.phone = event.mp.detail
    },
    onConfirm (event) {
      this.juInput = event.target.value
      this.showPop = false
    },
    onConfirmrs (event) {
      this.rsInput = event.target.value
      this.showPoprs = false
    },
    openPop () {
      this.showPop = true
    },
    plus () {
      this.boxNumber++
    },
    minus () {
      this.boxNumber--
    },
    overlimit () {
      wx.showToast({
        title: '不能再少了！',
        icon: 'none',
        duration: 2000
      })
    },
    thankYou () {
      wx.redirectTo({
        url: '/pages/activity_list/main'
      })
    },
    submitFrom () {
      let _this = this
      let userDtr = wx.getStorageSync('userDtr')
      // 检测手机号格式
      if (!validatePhone(this.phone)) {
        Toast('手机号格式不正确!')
      } else {
        wx.request({
          url: this.apiUrl + 'api/apply',
          method: 'post',
          header: {
            'content-type': 'application/x-www-form-urlencoded'
          },
          data: {
            'uid_str': userDtr,
            'name': this.names,
            'mobile': this.phone,
            'type': this.juInput,
            'catering_number': this.rsInput,
            'product_buy': this.boxNumber
          },
          success (code) {
            if (code.data.code === 200) {
              _this.operateShow = true
            } else {
              Dialog.alert({
                message: '请求缺少参数!'
              }).then(() => {})
            }
          }
        })
      }
    },
    // 积分增加， 更新 分享、浏览 、转发数量，增加积分
    // type:share 更新分享数   views  更新浏览数 forwarding 更新转发数
    getIntegral (type = 2) {
      let _this = this
      let id = _this.$root.$mp.query.id
      // 增加积分
      integral(id, type)
      // 增加统计数量  views
      views(id, 'views')
    },
    // 1.签到 2.阅读文章 3.转发文章 4.分享小程序
    sharpePage (id, type = 3) {
      // 增加积分
      integral(id, type)
      // 增加统计数量 share
      views(id, 'share')
    }
  }
}
</script>
<style>
van-cell-group {
  display: block;
}
/**/
.swiper{height:260px}
.slide-image{
  height: 260px;
  display:block;
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
}
.btnTy {
  width:40%;
  display:inline-block;
}
.btnTy .van-button--block{
  background-color: #49a16f;
  border: #49a16f 1px solid;
}


.topNotic {
  display: block;
  margin-bottom: 20rpx;
}
.topNotic .van-notice-bar {
  height: 45px;
  font-size:16px;
}
.topNotic .van-notice-bar__right-icon {
  top: 0;
}
.title {
  width: 100%;
  text-align: center;
  font-size: 25px;
  display: block;
}
.btnBOM {
  width: 100%;
  text-align: center;
  margin-top: 30px;
}
.lft {
  position: relative;
  left: 0;;
}
.van-field__input {
  width:0;
}
.classBorder {
  position:absolute;
  left:150px;
  top:15px;
  z-index:10
}
.inputClass .van-cell {
  font-size: 17px;
  padding:18px 15px
}

/*报名表格*/
.table-content {
  border:1px solid #efefef;
  border-right: 0;
  border-bottom: 0;
  width: 98%;
}
.tr {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.th,.td {
  padding: 6px;
  border-bottom: 1px solid #efefef;
  border-right: 1px solid #efefef;
  text-align: center;
  width:100%
}
.th {
  font-weight: 400;
  background-color: #dadada
}

</style>